<template>
  <baseComp
    :baseOption1="baseOption"
    :baseOption2="baseOption2"
    :imgUrl="imgUrl"
    :twoChart="true"
  />
</template>
<script setup>
import baseComp from "../base/index.vue";
import imgUrl from "../image/des.png";

function generateRandomData(t, b) {
  return Array.from({ length: 12 }, () => (Math.random() * t + b).toFixed(1));
}
let baseOption = {
  title: {
    text: "湿度监控",
    left: "center",
    textStyle: {
      color: "#fff",
      fontSize: 16,
    },
  },
  legend: {
    show: false,
    right: "0%",
    top: "0%",
    textStyle: {
      color: "#fff",
      fontSize: 10,
    },
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
    },
  },
  grid: {
    top: "15%",
    left: "3%",
    right: "3%",
    bottom: "0%",
    containLabel: true,
  },
  xAxis: {
    name: "时间",
    nameTextStyle: {
      padding: [0, 0, 0, -30],
    },
    type: "category",
    data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
    axisTick: {
      alignWithLabel: true,
    },
    axisLabel: {
      color: "#CCC",
    },
    axisLine: {
      color: "#fff",
    },
    axisLine: {
      lineStyle: {
        color: "#fff",
      },
    },
  },
  yAxis: {
    type: "value",
    name: "%RH",
    nameTextStyle: {
      padding: [0, -50, -10, -20],
    },
    axisLabel: {
      color: "#CCC",
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: "#fff",
      },
    },
  },
  series: [
    {
      name: "湿度",
      data: generateRandomData(0.2, 4.8),
      type: "line",
      lineStyle: {
        color: "#EECB4E ",
      },
      label: {
        show: true, //开启显示
        position: "top", //在上方显示
        color: "#fff",
      },
    },
  ],
};
let baseOption2 = {
  title: {
    text: "温度监控",
    left: "center",
    textStyle: {
      color: "#fff",
      fontSize: 16,
    },
  },
  legend: {
    show: false,
    right: "0%",
    top: "0%",
    textStyle: {
      color: "#fff",
      fontSize: 10,
    },
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
    },
  },
  grid: {
    top: "15%",
    left: "3%",
    right: "3%",
    bottom: "0%",
    containLabel: true,
  },
  xAxis: {
    name: "时间",
    nameTextStyle: {
      padding: [0, 0, 0, -30],
    },
    type: "category",
    data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
    axisTick: {
      alignWithLabel: true,
    },
    axisLabel: {
      color: "#CCC",
    },
    axisLine: {
      color: "#fff",
    },
    axisLine: {
      lineStyle: {
        color: "#fff",
      },
    },
  },
  yAxis: {
    type: "value",
    name: "℃",
    nameTextStyle: {
      padding: [0, -50, -10, -20],
    },
    axisLabel: {
      color: "#CCC",
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: "#fff",
      },
    },
  },
  series: [
    {
      name: "温度",
      data: generateRandomData(1.5, 24),
      type: "line",
      lineStyle: {
        color: "#EECB4E ",
      },
      label: {
        show: true, //开启显示
        position: "top", //在上方显示
        color: "#fff",
      },
    },
  ],
};
// let canRef = ref();
// let can2Ref = ref();

// useCharts(canRef, baseOption);
// useCharts(can2Ref, baseOption2);
</script>
<!-- <style lang="scss" scoped>
.block {
  width: 100%;
  height: 100%;
  display: flex;
  padding: 0 10px;
  .equip {
    width: 40%;
    .img {
      width: 100%;
      height: 100%;
    }
  }
  .chart {
    margin-left: 20px;
    flex: 1;
    height: 100%;
    .can {
      width: 100%;
      height: 50%;
    }
  }
}
</style> -->
